<script setup lang="ts">
import type { VxeGridProps, VxePagerEvents } from 'vxe-table'

import { CopyDocument } from '@element-plus/icons-vue'
import { afterSaleDetail } from '@fl/api/city-service'
import { SearchTable } from '@fl/components'
import FlUpload from '@fl/components/fl-upload.vue'
import { useClipboard } from '@vueuse/core'
import { cloneDeep } from 'lodash-es'
import { useRoute, useRouter } from 'vue-router'

import { afterSaleFlowStatus, afterSaleReason, afterSaleType, returnStateId, shippingType } from './type'

const route = useRoute()
const router = useRouter()

const orderLineId = route.params.id
const active = ref(6)
const gridOptions = reactive<VxeGridProps>({
    columns: [
        { field: 'merchantInfor', slots: { default: 'merchantInfor' }, title: '商品信息' },
        { field: 'orderQuantity', title: '数量' },
        { field: 'orderAmount', title: '单价' },
        { field: 'orderDiscountAmount', title: '优惠' },
        { field: 'orderPaidAmount', title: '小计' },
    ],
})
const initialPage = {
    currentPage: 1,
    pageSize: 10,
    total: 0,
}
const tablePage = ref(cloneDeep(initialPage))
const list = ref([{}])
const detailData = ref({})
const updateKey = ref(666)
const saleImgs = ref('')

// 详情数据
if (orderLineId) {
    afterSaleDetail({
        orderLineId,
    }).then((res) => {
        const { orderAmount, orderDiscountAmount, orderPaidAmount, orderQuantity, returnTime, saleImgs, skuImgPath, skuName, spuId } = res
        detailData.value = res
        // detailData.value.returnTime = res.returnTime.filter(item => item.processDateTime)
        active.value = returnTime.length
        saleImgs.value = saleImgs.map(v => v.afterSaleImgPath).join(';')
        list.value = [{ orderAmount, orderDiscountAmount, orderPaidAmount, orderQuantity, skuImgPath, skuName, spuId }]
        updateKey.value = +new Date()
    })
}

/**
 * methods start
 */
const handlePageChange: VxePagerEvents.PageChange = ({ currentPage, pageSize }) => {
    tablePage.value.currentPage = currentPage
    tablePage.value.pageSize = pageSize
}

function goBack() {
    // localeStore.setCurrentPage(Number(route.query.page))
    router.push({ name: 'after-sales-management' })
}

function toPage(row) {
    router.push({ name: 'commodity-detail', params: { id: row.skuId, pageType: 'detail' } })
}

function copyText(content) {
    const { copy, isSupported } = useClipboard()
    if (!isSupported.value) {
        navigator.clipboard.writeText(content).then(() => {
            ElMessage.success('复制成功')
        }).catch((err) => {
        // 复制失败
            console.error('复制失败', err)
        })
        return
    }
    copy(content)
    ElMessage.success('复制成功')
}

/**
 * methods end
 */
</script>

<template>
    <div class="ater-sales-detail">
        <el-button type="info"
                   plain
                   @click="goBack"
        >
            返回列表
        </el-button>

        <div class="detail-step">
            <el-steps align-center>
                <el-step v-for="(stepItem, index) in detailData.returnTime"
                         :key="index"
                         :class="stepItem.processDateTime ? 'done' : 'no-start'"
                         :description="stepItem.processDateTime"
                >
                    <template #icon>
                        {{ stepItem.processName }}
                    </template>
                </el-step>
            </el-steps>
        </div>

        <div class="base-info">
            <el-descriptions :column="4">
                <el-descriptions-item label="售后号："
                                      align="center"
                >
                    {{ detailData.afterSaleCode }}
                    <el-icon @click="copyText(detailData.afterSaleCode)">
                        <CopyDocument />
                    </el-icon>
                </el-descriptions-item>

                <el-descriptions-item label="申请时间：">
                    {{ detailData.createTime }}
                </el-descriptions-item>

                <el-descriptions-item label="快递单号：">
                    {{ detailData.orderTrackingNumber }}
                    <el-icon @click="copyText(detailData.orderTrackingNumber)">
                        <CopyDocument />
                    </el-icon>
                </el-descriptions-item>

                <el-descriptions-item label="订单号：">
                    {{ detailData.orderCode }}
                    <el-icon @click="copyText(detailData.orderCode)">
                        <CopyDocument />
                    </el-icon>
                </el-descriptions-item>
            </el-descriptions>
        </div>

        <div class="detail-infor module">
            <h3 class="title">
                售后明细
            </h3>

            <ul>
                <li>
                    <span class="label">售后状态：</span>

                    <span class="value">{{ detailData.spuDelivery === shippingType.FLASH_DELIVERY ? afterSaleFlowStatus[detailData.afterSaleFlowStatus] : returnStateId[detailData.returnStateId] }}</span>
                </li>

                <li>
                    <span class="label">售后类型：</span>

                    <span class="value">{{ afterSaleType[detailData.afterSaleType] }}</span>
                </li>

                <li>
                    <span class="label">退款原因：</span>

                    <span class="value"> {{ afterSaleReason[detailData.afterSaleReason] }}</span>
                </li>

                <li>
                    <span class="label">补充描述：</span>

                    <span class="value">{{ detailData.description }}</span>
                </li>

                <li class="voucher">
                    <span class="label">凭证：</span>

                    <FlUpload :key="updateKey"
                              v-model="saleImgs"
                              disabled
                              split-symbol=";"
                              :file-size="1024"
                              :limit="9"
                    />
                </li>
            </ul>
        </div>

        <div class="module order-infor">
            <h3 class="title">
                订单信息(收件人信息)
            </h3>

            <ul>
                <li>
                    <span class="label">收货人：</span>

                    <span class="value">{{ detailData.receiverName }}</span>
                </li>

                <li>
                    <span class="label">联系电话：</span>

                    <span class="value">{{ detailData.receiverTel }}</span>
                </li>

                <li>
                    <span class="label">收货地址：</span>

                    <span class="value">{{ detailData.orderAddress }}</span>
                </li>
            </ul>
        </div>

        <div class="order-infor module">
            <h3 class="title">
                商品信息
            </h3>

            <SearchTable v-bind="gridOptions"
                         v-model:pager="tablePage"
                         :data="list"
                         @page-change="handlePageChange"
            >
                <template #merchantInfor="{ row }">
                    <div class="merchant-info">
                        <div class="img-box"
                             :style="{ backgroundImage: `url(${row.skuImgPath})` }"
                        >
                            图片
                        </div>

                        <el-button type="primary"
                                   text
                                   @click="toPage(row)"
                        >
                            {{ row.skuName }}
                        </el-button>
                    </div>
                </template>
            </SearchTable>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.ater-sales-detail {
    .detail-step {
        margin-top: 24px;
        overflow-x: auto;
        :deep(.el-step__icon.is-icon) {
            width: 120px;
            height: 120px;
            border-radius: 50%;
        }
        :deep(.el-step.is-center .el-step__description) {
            margin-top: 6px;
        }
        :deep(.el-step.is-horizontal .el-step__line) {
            top: 60px;
        }
    }
    .base-info {
        margin-top: 24px;
        .el-icon {
            margin-left: 6px;
            cursor: pointer;
        }
        :deep(
                .el-descriptions__body
                    .el-descriptions__table:not(.is-bordered)
                    .el-descriptions__cell
            ) {
            padding: 12px 0;
        }
    }
    .module {
        margin-top: 24px;
        .title {
            border-left: 4px solid var(--el-color-primary);
            padding-left: 12px;
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 12px;
        }
        ul {
            li {
                padding-left: 12px;
                line-height: 28px;
                display: flex;
                .label {
                    width: 100px;
                    text-align: right;
                    color: #999;
                    margin-right: 12px;
                }
            }
        }
    }
    .detail-infor {
        .voucher {
            display: flex;
        }
    }
    .merchant-info {
        display: flex;
        align-items: center;
        .img-box {
            width: 50px;
            height: 50px;
            background-size: 100% 100%;
            color: rgba(255, 255, 255, 0);
            margin-top: 12px;
        }
    }
    :deep(.done .el-step__icon) {
        background-color: var(--el-color-primary);
        color: #fff;
    }
    :deep(.no-start .el-step__icon) {
        // background-color: #dbd3d3;
    }
}
</style>
